<template>
  <div class="app-container">
    <el-table 
      :data="roleList" 
      border 
      style="width: 100%;" 
      highlight-current-row 
      v-loading="fetchLoading"
    >
      <el-table-column align="center" label="角色 ID" width="100">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色名称" width="200">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否是超管" width="100">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.is_super | superTag(2)"
          >{{ row.is_super | superTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作权限">
        <template slot-scope="{row}">
          <span v-if="isSuper(row.is_super)">拥有至高无上的权限</span>
          <template v-else>
            <div v-for="(item, index) in row.auths" :key="index">
              {{ item.names }}
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作方法">
        <template slot-scope="{row}">
          <span v-if="isSuper(row.is_super)">拥有至高无上的权限</span>
          <template v-else>
            <div v-for="(item, index) in row.auths" :key="index">
              {{ item.actions || '无' }}
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="{row}" v-if="!isSuper(row.is_super)">
          <el-button type="primary" size="small" @click="handleEdit(row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { roleList, roleDelete } from '@/api/role'
import { isSuper } from '@/utils/util'

export default {
  name: 'RoleList',
  data() {
    return {
      roleList: [],
      fetchLoading: false,
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    isSuper,
    // 获取列表
    async getRoleList() {
      try {
        this.fetchLoading = true
        const { data } = await roleList()
        this.roleList = data
      } finally {
        this.fetchLoading = false
      }
    },
    // 编辑
    handleEdit(id) {
      this.$router.push({ name: 'RoleUpdate', params: { id } });
    },
    // 删除
    async handleDelete(id) {
      await this.$confirm("此操作将永久删除该角色, 是否继续？", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      await roleDelete(id)
      this.$notify.success({
        title: "成功",
        message: "删除成功",
        duration: 3000,
      })
      this.getRoleList()
    }
  },
}
</script>

<style lang="scss" scoped>

</style>